<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>多边形</title>
        <style>
            text {
                /* color: purple; */
                /* fill: purple; */
                fill: none;
                font-size: 45px;
                font-weight: 700;
                stroke: blue;
                stroke-width: 2px;
                transform: rotate(15deg);
                transition: all 0.5s;
            }
            text:hover {
                stroke: red;
                text-shadow: 0 0 50px gold;
            }
        </style>
    </head>
    <body>
        <svg width="400" height="400">
            <!-- 矩形 -->
            <!-- 左上角点、长宽大小 -->
            <rect x="10" y="10" width="200" height="150" style="stroke: blue; fill: skyblue"></rect>
            <!-- 椭圆 -->
            <!-- 椭圆中心、水平半径、垂直半径（长短半径，就能画椭圆） -->
            <ellipse cx="50" cy="200" rx="40" ry="30" style="stroke: purple; fill: gold"></ellipse>
        </svg>
        <svg width="400" height="400">
            <!-- 路径 -->
            <!-- 字母代表不同含义：M-起始，L-某个点，Z-闭合路径 Q-二次方贝塞尔曲线（其它字母自己查资料） -->
            <!-- 大写：绝对定位，小写：相对定位 -->
            <!-- <path d="M 100 350 q 150 -300 300 0 Z" stroke="blue" stroke-width="5" fill="none"></path> -->
            <path d="M 100,350 q 150,-300 300,0" stroke="blue" stroke-width="5" fill="none"></path>
        </svg>
        <svg width="400" height="400">
            <!-- 文本 -->
            <!-- 颜色用color无效，要用fill -->
            <text x="120" y="150">我是文字哦！</text>
        </svg>
    </body>
</html>
